<template>
  <div>
    <div class="search">

      <p> 名称</p>
      <el-input v-model="keyword" placeholder="请输入关键字" @keydown.enter.native="renderAdminList"></el-input>

      <el-button type="primary" @click="renderAdminList" size="small">搜索</el-button>
      <el-button type="primary" @click="handleAdd" size="small">新增</el-button>

    </div>

    <el-table :data="tableData" border class="table" :height="getHeight()" style="margin-left: 20px; width: 95% ">
      <el-table-column type="index" label="序号" width="50" align="center" fixed>
      </el-table-column>

      <el-table-column prop="id" label="ID" width="100" align="center">
      </el-table-column>
      <el-table-column prop="name" label="用户名" width="200" align="center">
      </el-table-column>
      <el-table-column prop="role_id_array" label="角色" align="center">
        <template slot-scope="{row}">
          <div>
            {{ showRoleName(row.role_id_array)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" width="200" align="center">
      </el-table-column>
      <el-table-column prop="updated_at" label="更新时间" width="200" align="center">
      </el-table-column>

      <el-table-column label="操作" width="200" align="center" fixed="right">
        <template slot-scope="scope">

          <el-button type="primary" icon="el-icon-edit" circle size="small" @click=" editRow(scope.row)"></el-button>
          <el-button @click.native.prevent="deleteRow(scope.row)" type="danger" icon="el-icon-delete" circle size="small"
            class="delbtn"> </el-button>

        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-row class="footer" style="margin: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next,jumper" :total="count">
      </el-pagination>
    </el-row>

    <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="form = {};">
      <el-form :model="form" label-width='90px' >
        <el-form-item label="用户名" >
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" v-show="isShow2">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="分配角色" v-show="isShow">
          <el-select v-model="form.role_ids_array" multiple >
            <el-option v-for="item in roleList" :value="item.id" :label="item.name" :key="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="超级管理员" >
          <el-select v-model="form.is_admin">
            <el-option value="1" label="是"></el-option>
            <el-option value="0" label="否"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false; onSubmit()">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
  
<script>
import {getAdminList,addAdmin,delAdmin,editAdmin,editAdminPassword,getRoleList} from '@/api/role'
export default {
  name: 'roleManagement',
  data() {
    return {
      keyword: "",
      tableData: [],
      page: 1,
      limit: 20,
      count: 0,
      form:{},
      dialogFormVisible:false,
      title:'',
      roleList:[],
      isShow:true,
      isShow2:true
    }
  },
  created() {
    this.renderAdminList()
  },

  methods: {
    renderAdminList() {
      getAdminList({ keyword: this.keyword, page: this.page, limit: this.limit }).then(res => {
        if (res.code == 1) {
          console.log(res)
          this.tableData = res.data.list
          this.count = res.data.count
        }
      })
      getRoleList({page:1,limit:100,keyword:""}).then(res=>{
        if(res.code==1){
          this.roleList=res.data.list
        //  console.log(this.roleList)
        }
      })
    },
    // 渲染角色名称
    showRoleName(idArr){
     // console.log(idArr)
     let arr=[]
      if(idArr[0]){
        this.roleList.forEach(item=>{
         idArr.forEach(el=>{
            if(item.id==el){
              arr.push(item.name)
            }
          })
        })
        return arr.toString()
      }
    },
    handleAdd(){
      this.dialogFormVisible=true
      this.isShow=false
      this.isShow2=true
      this.title='添加用户'
     
    },
  
    editRow(row){
      this.dialogFormVisible=true
      this.isShow=true
      this.isShow2=false
      this.title='编辑用户'   
      this.form={...row,id:row.id, role_ids_array:row.role_id_array[0] &&row.role_id_array}
       console.log(this.form)
    },
    onSubmit(){
      if(this.title=='添加用户'){
        this.add()
      }else{
        this.edit()
      }
    },
    edit(){
    // console.log(this.form)
      editAdmin(this.form).then(res=>{
        if(res.code==1){
          this.$message.success('编辑成功')
          this.renderAdminList()
        }
      })
    },
    add(){
     // console.log(this.form)
      addAdmin(this.form).then(res=>{
        if(res.code==1){
          this.$message.success('添加成功')
          this.renderAdminList()
        }
      })
    },

    deleteRow(row){
      delAdmin(row).then(res=>{
        if(res.code==1){
          this.$message.success('删除成功')
          this.renderAdminList()
        }
      })

    },

    handleSizeChange(val) {
      this.limit = val
      this.renderAdminList()
    },
    //改变当前页
    handleCurrentChange(val) {
      this.page = val
      this.renderAdminList()
    },
    //获取表格高度
    getHeight() {
      return window.innerHeight - 255
    },
  },


}

</script>  
  
<style  scoped>
.search {
  display: flex;
  padding: 20px;
  box-sizing: border-box;
  align-items: center;
}

.search p {
  width: 80px;
}

.search .el-input {
  width: 200px;
  margin-right: 20px;
}
</style>
  